<template>
	<el-dialog :title="fileName" v-model="curDialog" width="400px" append-to-body>
	  <gz-upload ref="upload" :limit="1" accept=".xlsx, .xls" :drag="true" :auto-upload="false" :disabled="isUploading">
	    
	    <template class="el-upload__tip text-center" #tip>
	      <span>仅允许导入xls、xlsx格式文件。</span>
	      <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click.stop="importTemplate">下载模板</el-link>
	    </template>
	  </gz-upload>
	  <template #footer class="dialog-footer">
	    <el-button type="primary" @click="submitFileForm">确 定</el-button>
	    <el-button @click="curDialog = false">取 消</el-button>
	  </template>
	</el-dialog>
</template>
<script>
	export default {
		name: "gz-import",
		props: {
			api:{
				default:"",
			},
			apiTemplate:{
				default:"",
			},
			fileName: {
				default: '导入数据'
			}
		},
		data() {
			return {
				curDialog: false,
				isUploading:false,
				curData:{
					
				}
			}
		},
		methods: {
			open() {
				this.curDialog = true
			},
			close() {
				this.curDialog = false
			},
			confirmClick() {
				this.$emit("confirm")
			},
			cancelClick() {
				this.curDialog = false
				this.$emit("cancel")
			},
			importTemplate(){
				this.$api[this.apiTemplate]({
					fileName:this.fileName
				})
			},
			submitFileForm(){
				this.$api[this.api]({
					file:this.$refs.upload.fileList[0].raw
				}).then(data=>{
					this.$common.msgWarn("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + data + "</div>", { dangerouslyUseHTMLString: true });
				}).catch((message)=>{
					this.$common.msgWarn("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + message + "</div>", { dangerouslyUseHTMLString: true });
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.el-upload__tip{
	  line-height: 1.2;
	}
	.text-center {
	  text-align: center
	}
</style>
